@import "/app/styles/variables";
@import "/app/styles/mixins";



.mall-ad {
  position: relative;
  display: block;
  width: 100%;
  padding: 39.3% 0 0 0 !important;
  img {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    margin: 0;
    width: 100%;
    height: auto;
  }
}

.mall-nav {
  @include display-flex;
  width: 100%;
  height: 50px;
  > li {
    @include flex(1);
    position: relative;
    a {
      display: block;
      width: 100%;
      height: 100%;
      padding: 15px;
      line-height: 20px;
      font-size: 15px;
      text-align: center;
      color: inherit;
      > i {
        position: relative;
        top: -5px;
      }
    }
    &:not(:last-child) {
      @include hairline-horizontal(single, $border-color-default, 1px, 18px, 18px, 0.4);
    }
  }
}

.mall-goods {
  @include display-flex;

  padding: 14px;
  .mall-goods-image {
    @include flex(115);
    a {
      position: relative;
      display: block;
      width: 100%;
      padding-top: 56.52%;
      img {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        margin: 0;
        width: 100%;
        height: auto;
      }
    }
  }
  .mall-goods-content {
    @include flex(0 0 172px);
    padding: 0 10px;
    position: relative;

    > p:last-child {
      position: absolute;
      bottom: 0;
    }
  }
  .mall-goods-buttons {
    @include flex(0 0 45px);
    position: relative;
    button, .btn {
      width: 100%;
      margin-top: -12px;
      position: absolute;
      top: 50%;
    }
  }
}
.table-view-cell > .mall-goods {
  margin: -10px -14px;
}

